

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/fluid.png">
  <link rel="icon" href="/img/fluid.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
    <meta name="description" content="课程设计Gitee 地址： 基于SpringBoot的简易商城系统_半成品 技术栈为 SpringBoot + Thymeleaf + Bootstrap + SSM + MySQL + Shiro + Echarts 一、前端设计存在的问题1.1 排版不合理以下面的登录页面为例，排版看起来并不符合常理，笔者当时主要是根据自己的想法，改样式，改来改去都不太满意，甚至花时间用css写样式，实现一些看">
<meta property="og:type" content="article">
<meta property="og:title" content="课设总结 _ 初学者SpringBoot框架开发存在的问题总结 _ 商城系统的设计问题总结">
<meta property="og:url" content="http://example.com/2022/05/20/%E8%AF%BE%E8%AE%BE%E6%80%BB%E7%BB%93%20_%20%E5%88%9D%E5%AD%A6%E8%80%85SpringBoot%E6%A1%86%E6%9E%B6%E5%BC%80%E5%8F%91%E5%AD%98%E5%9C%A8%E7%9A%84%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93%20_%20%E5%95%86%E5%9F%8E%E7%B3%BB%E7%BB%9F%E7%9A%84%E8%AE%BE%E8%AE%A1%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="课程设计Gitee 地址： 基于SpringBoot的简易商城系统_半成品 技术栈为 SpringBoot + Thymeleaf + Bootstrap + SSM + MySQL + Shiro + Echarts 一、前端设计存在的问题1.1 排版不合理以下面的登录页面为例，排版看起来并不符合常理，笔者当时主要是根据自己的想法，改样式，改来改去都不太满意，甚至花时间用css写样式，实现一些看">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://img-blog.csdnimg.cn/eb867db167e54f9a98a4d878416197f9.png">
<meta property="og:image" content="https://img-blog.csdnimg.cn/6bf5b869f0d64f8ca083af0ff34abaff.png">
<meta property="article:published_time" content="2022-05-20T12:15:54.000Z">
<meta property="article:modified_time" content="2022-08-22T15:41:28.852Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="自我总结">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://img-blog.csdnimg.cn/eb867db167e54f9a98a4d878416197f9.png">
  
  
  
  <title>课设总结 _ 初学者SpringBoot框架开发存在的问题总结 _ 商城系统的设计问题总结 - Hexo</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.9.2","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 6.2.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>尤 Ni&#39;s Blog</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="课设总结 _ 初学者SpringBoot框架开发存在的问题总结 _ 商城系统的设计问题总结"></span>
          
        </div>

        
          
  <div class="mt-3">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-author" aria-hidden="true"></i>
        John Doe
      </span>
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2022-05-20 20:15" pubdate>
          2022年5月20日 晚上
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          2.8k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          24 分钟
        
      </span>
    

    
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">课设总结 _ 初学者SpringBoot框架开发存在的问题总结 _ 商城系统的设计问题总结</h1>
            
              <p class="note note-info">
                
                  
                    本文最后更新于：1 小时前
                  
                
              </p>
            
            
              <div class="markdown-body">
                
                <h1 id="课程设计"><a href="#课程设计" class="headerlink" title="课程设计"></a>课程设计</h1><p><strong>Gitee 地址：</strong> <a target="_blank" rel="noopener" href="https://gitee.com/ccuni/simple-shop-system-v2.0/tree/master">基于SpringBoot的简易商城系统_半成品</a></p>
<p>技术栈为 SpringBoot + Thymeleaf + Bootstrap + SSM + MySQL + Shiro + Echarts</p>
<h1 id="一、前端设计存在的问题"><a href="#一、前端设计存在的问题" class="headerlink" title="一、前端设计存在的问题"></a>一、前端设计存在的问题</h1><h2 id="1-1-排版不合理"><a href="#1-1-排版不合理" class="headerlink" title="1.1 排版不合理"></a>1.1 排版不合理</h2><p>以下面的登录页面为例，排版看起来并不符合常理，笔者当时主要是根据自己的想法，改样式，改来改去都不太满意，甚至花时间用css写样式，实现一些看起来花里胡哨的动态效果，比如增大、缩小、转圈之类的，其实现在看来，这些都没有必要。<br><img src="https://img-blog.csdnimg.cn/eb867db167e54f9a98a4d878416197f9.png" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"><br>下面是修改后的简单版的登录系统<br><img src="https://img-blog.csdnimg.cn/6bf5b869f0d64f8ca083af0ff34abaff.png" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"><br>虽然还是一样的简单，但是结构层次比较清楚，上中下结构。而不是之前的左右、上下结构混合。</p>
<h2 id="1-2-前端技术架构的问题"><a href="#1-2-前端技术架构的问题" class="headerlink" title="1.2 前端技术架构的问题"></a>1.2 前端技术架构的问题</h2><p>一开始，笔者是通过 Thymeleaf模板引擎通过MVC架构实现数据渲染的，后来发现通过AJAX会好一些，因为可以实现动态加载的效果，延时的加载数据，而之前就是一跳转页面数据全都展现出来了，这样页面看起来比较 LOW，于是后来就改成了MVP架构，P层负责调用Model层和View层，不过光使用 Bootstrap 、JQuery 、Thymeleaf来实现 MVP架构还是比较吃力的，况且还是我一个人独自开发，当时还经常记录开发的记录，但是由于个人所学有限，最终做出来的效果就比较差劲。</p>
<h2 id="1-3-需要改进的地方"><a href="#1-3-需要改进的地方" class="headerlink" title="1.3 需要改进的地方"></a>1.3 需要改进的地方</h2><p>尽量简化代码，把逻辑简单化，不能想得太复杂，尽量把代码分清楚，比如根据不同的模块来存放代码，用户相关的就放在用户模块，商品相关的就放在商品模块。</p>
<p>多好好学学技术，比如最基本的JavaScript，先把基础打牢，然后再学JQuery，之后再考虑学习框架，Vue或React，而不是每次遇到什么需求就去一股脑的做，这样既费时间，而且还没什么效果。</p>
<h1 id="二、后端设计存在的问题"><a href="#二、后端设计存在的问题" class="headerlink" title="二、后端设计存在的问题"></a>二、后端设计存在的问题</h1><p>后端使用的是SpringBoot整合SSM，用起来十分方便，但是花了许多时间在DAO层上，由于实体类比较多，myabtis使用插件自动生成的代码内容又多，这就造成了项目很臃肿，有的方法是用不到的，但是依然在资源文件夹里，修改的时候也有局限性，如果自己重新写，又容易和之前的冲突。</p>
<p>缺少系统的设计，完全是看个人的感觉，当时由于是在假期比较闲，就下定决心好好学一学SSM，不过后来在做课设的时候花了太多时间，大部分时间都是自己在修改代码，而且基本上都是临时想到的点子，没有提前规划。</p>
<h1 id="三、设计上存在的问题"><a href="#三、设计上存在的问题" class="headerlink" title="三、设计上存在的问题"></a>三、设计上存在的问题</h1><p>这个学期，我们刚好开始学《软件工程》这门课，大半个学期过去之后，我曾经以为编码是最重要的这个观念被彻底颠覆了，一个软件开发的整套流程中，编码只是一部分，更重要的还是需求分析、系统设计，因为编码就是得根据这两个来的，我想起自己在做课设的时候，经常是想到一个就做一个，想到该怎么做就怎么做，或者是参考书上的内容，然后在根据自己的想法直接就开始敲代码了。</p>
<p>谁曾想，编码并不是那么重要，思路才是最重要的，只有好的编码文档，才能造就出更好的软件，所以这一次我吸取了教训，以后在做任何一个项目前，先同步的编写文档，当文档完善到一定程度后，再着手编码，这样就更踏实，更有效率。</p>
<h1 id="四、学习上存在的问题"><a href="#四、学习上存在的问题" class="headerlink" title="四、学习上存在的问题"></a>四、学习上存在的问题</h1><p>有一句话叫基础不牢，地动山摇，经常敲代码的朋友肯定知道，在互联网业的知识多的根本学不完，十年？二十年？都有可能！所以，基础就非常的重要，曾经我以为做课设、做项目，只要项目能跑，有效果就挺好的，那时候考虑的问题太少，其实现在就发现自己知道的太少了，而且在自己知道见识少的情况下，去花时间做一些项目，大部分是根据自己的想法，这样肯定是没有多大效果的。</p>
<p>最好的学习就是学会参考，我们从小的教育就是每一科都有课本，我们是根据课本上的内容进行学习的。</p>
<p>其实编程也是这样，我们得多看那些同行学者的代码、文献，增长自己的见识，这样才有机会做出好的作品，如果只是一意孤行，那么最后肯定是没有多少实质性效果的。</p>
<p>我现在就比较后悔，因为当初整天花时间敲代码，敲的都是一些偏基础的逻辑题，其实那些题是用来熟悉语言特性的，只要大概熟悉语言特性就够了，没有必要花太多时间，除非是为了打比赛，打比赛的话肯定要花很多时间去刷题了，否则根本就没必要一整天都花时间去刷编程题，理论知识才是最重要的。</p>
<p>其实还有很多话，有许多问题需要提出总结，这里就先不长篇大论了，主要是以本次的课设来讨论。</p>
<h1 id="五、商城系统的设计问题"><a href="#五、商城系统的设计问题" class="headerlink" title="五、商城系统的设计问题"></a>五、商城系统的设计问题</h1><h2 id="5-1-数据库设计"><a href="#5-1-数据库设计" class="headerlink" title="5.1 数据库设计"></a>5.1 数据库设计</h2><p>首先数据库，可以根据需求，看看自己想做的网站规模是多大的，如果超过10万，甚至更大，那么在设计数据表的时候就需要考虑性能，可以使用Redis这种缓存数据库，如果数据量小，那么直接用MySQL就OK了。</p>
<p>尽量不设置表的外键，否则会影响性能，因为外键是MySQL自身维护的，如果网站请求书比较多，那么MySQL就得承载较大的压力。</p>
<p>   除了关系型数据库，可以根据实际情况使用一些现代型的数据库，比如 Redis 缓存数据库、MongoDB 文档数据库、Neo4j 图数据库等，可以根据实际需求来定。</p>
<h2 id="5-2-技术选型问题"><a href="#5-2-技术选型问题" class="headerlink" title="5.2 技术选型问题"></a>5.2 技术选型问题</h2><p>技术不一定要最先进，要根据自身的实际情况来定，如果自己学习能力强，学习时间比较多，那么就可以上丰富的框架，比如前端：Vue、后端：SpringBoot，如果时间不够多，那么就看你自己将来要从事哪个行业，偏前端的话就尽量把Vue学了，然后后端可以找搭档一起完成，或者后端简单一点就直接用传统的 Servlet。</p>
<p>如果是主学后端，那么主要是先学SpringBoot，此时前端Vue没必要直接给学了，毕竟是主后端的，先把后端全家桶给学扎实了，SSM、SpringCloud等等，可能现在许多地方都有前后端分离的思想，所以许多小伙伴想着得赶紧学了，把SpringBoot学了，再把Vue学了，走全栈，这个想法是挺好的，不过要根据自己的能力来哟，假如你现在和我一样，连Java进阶都不怎么掌握，多线程、高并发之类的，并不怎么了解，数据结构与算法也不怎么熟悉，这时候就没必要去花时间整前端框架了，先把自己的基础功打好。</p>
<p>最后就是在商城系统里可能会遇到许多需要扩展的需求，比如存放图片，难道是把图片存在自己的服务端吗？这样也可以，但要保证服务器的网络够给力，比如在有一千个人同时上传的时候，这时候服务器得有承载能力，如果采用云存储就不用担心这个问题，而且云存储的费用不贵，一年就十几块，数据量大的话可能几百吧。</p>
<p>其实在开发一个项目的时候要考虑的问题挺多的，从需求分析、系统设计，到最后的测试、部署上线、维护，这一整套流程，每一套流程都要好好准备，并不单单只是编码这么简单的，因为我们写项目，最终的目的还是为用户服务，做出来的软件要能满足一部分人的需求，这才是真正的软件…</p>
<p>以上就是我在这几个月以来学习开发项目的经验心得，接下来我会更注重文档编写，还有文献的参考、资料的参照，先把基础功打好，丰富扩展自己的知识面，然后再尝试做出更好的一些项目，希望能有所进步吧。</p>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/categories/%E8%87%AA%E6%88%91%E6%80%BB%E7%BB%93/" class="category-chain-item">自我总结</a>
  
  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/tags/%E8%87%AA%E6%88%91%E6%80%BB%E7%BB%93/">#自我总结</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>课设总结 _ 初学者SpringBoot框架开发存在的问题总结 _ 商城系统的设计问题总结</div>
      <div>http://example.com/2022/05/20/课设总结 _ 初学者SpringBoot框架开发存在的问题总结 _ 商城系统的设计问题总结/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>John Doe</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2022年5月20日</div>
        </div>
      
      
      <div class="license-meta-item">
        <div>许可协议</div>
        <div>
          
            
            
              <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
              <span class="hint--top hint--rounded" aria-label="BY - 署名">
                <i class="iconfont icon-by"></i>
              </span>
              </a>
            
          
        </div>
      </div>
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2022/06/21/Vue2%20%E7%AC%94%E8%AE%B01%20%E5%9F%BA%E4%BA%8EVue2%E7%9A%84TodoList%E5%BE%85%E5%8A%9E%E4%BA%8B%E9%A1%B9%E5%A2%9E%E5%88%A0%E6%9F%A5%E6%A1%88%E4%BE%8B%20_%20%E5%9F%BA%E4%BA%8ENode.js%20%E4%BD%BF%E7%94%A8Vue-CLI%E8%84%9A%E6%89%8B%E6%9E%B6%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE/" title="Vue2 笔记1 基于Vue2的TodoList待办事项增删查案例 _ 基于Node.js 使用Vue-CLI脚手架构建项目">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">Vue2 笔记1 基于Vue2的TodoList待办事项增删查案例 _ 基于Node.js 使用Vue-CLI脚手架构建项目</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2022/05/19/Neo4j%20%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98_%E5%9F%BA%E4%BA%8EPy2Neo%E6%9E%84%E5%BB%BA%E7%94%B5%E5%BD%B1%E7%9F%A5%E8%AF%86%E5%9B%BE%E8%B0%B1/" title="Neo4j 项目实战_基于Py2Neo构建电影知识图谱">
                        <span class="hidden-mobile">Neo4j 项目实战_基于Py2Neo构建电影知识图谱</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
    </div>
  
  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      headingSelector : CONFIG.toc.headingSelector || 'h1,h2,h3,h4,h5,h6',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      collapseDepth   : CONFIG.toc.collapseDepth || 0,
      scrollSmooth    : true,
      headingsOffset  : -boardTop
    });
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.10/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/js/local-search.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
